<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="18" /></span>
    <strong>{{ $t("language.betting.name") }}</strong>
    <span @click="$openPage('/kefu')"><img v-lazy="getImg('kefu.png')" alt="" /></span>
  </header>
  <main class="tran">
    <ul>
      <li>
        <el-select class="select" v-model="bettingForm.coinType" placeholder="Select" size="large"
          popper-class="writebetting">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span></span>
        <el-select class="select" v-model="bettingForm.platformId" placeholder="Select" size="large"
          popper-class="writebetting">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </li>
      <li>
        <el-date-picker :default-value="getTime('-')" date-format="YYYY-MM-DD" time-format="HH:mm:ss"
          default-time="00:00:00" class="time" popper-class="datetime" v-model="bettingForm.startDateTime"
          type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD" />
        <span>~</span>
        <el-date-picker :default-value="getTime('-')" default-time="00:00:00" class="time"
          v-model="bettingForm.endDateTime" popper-class="datetime" type="datetime" placeholder="Pick a Date"
          format="YYYY-MM-DD" date-format="YYYY-MM-DD" time-format="HH:mm:ss" />
      </li>
    </ul>
    <dl v-if="recordData.gameRecords.length != 0" v-infinite-scroll="initData" :infinite-scroll-immediate="false"
      infinite-scroll-distance=0>
      <dd v-for="item in recordData.gameRecords" :key="item.recordId">
        <div class="top">
          <div>
            <img src="@/assets/img/pg.png" alt="">
            <span>{{ item.platformId }}</span>
          </div>
          <strong :class="Number(item.winningCoins) < 0 ? 'red' : 'green'">{{ Number(item.winningCoins) }}</strong>
        </div>
        <h3>
          <span>{{ AllGameList.find((i)=>i.game_uid==item.gameUID).name }}</span>
        </h3>
        <ul>
          <li>
            <span>{{ $t('language.betting.singleID') }}</span>
            <div>
              <strong>{{ item.roundId }}</strong>
              <van-button @click="copyToClipboard(item.roundId,proxy)">{{ $t('language.betting.copy') }}</van-button>
            </div>
          </li>
          <li>
            <div>
              <span>{{ $t('language.betting.Betting') }}</span>
              <img src="@/assets/img/mylrft.png" alt="">
              <i>{{ item.bettingCoins }}</i>
            </div>
            <p>{{ item.playtime }}</p>
          </li>
        </ul>

      </dd>
    </dl>
    <div class="footer" v-if="!loadingbetting && recordData.gameRecords.length == 0">
      <img src="@/assets/img/bg2.png" alt="" />
      <p>{{ $t("language.betting.nodata") }}</p>
    </div>
  </main>
</template>
<script setup lang="ts">
import { reactive, watch, ref, getCurrentInstance, onActivated } from "vue";
import {copyToClipboard} from "@/utils/common"
import { getTime } from "@/utils/common.ts"
import { useI18n } from "vue-i18n";
import { AllGameList } from "@/utils/gamelist.ts"
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};

const { proxy } = getCurrentInstance();
const { t } = useI18n();
let info = JSON.parse(localStorage.getItem("info"));
let bettingForm = reactive({
  id: info.gameID,
  coinType: 0,
  platformId: 0,
  startDateTime: getTime('-'),
  endDateTime: getTime('-'),
  pageIndex: 1,
  pageSize: 10
})
let recordData = reactive({
  page: {
    pageIndex: 0,
    pageSize: 0,
    totalCount: 0
  },
  gameRecords: []
})
//加载loading
let loadingbetting = ref(true)
//数据初始化
let initData = () => {
  loadingbetting.value = true
  proxy.$post("/Game/v1.0/Record/BetRecord", bettingForm).then(({ data }) => {
    recordData.gameRecords.push(...data.data.gameRecords)
    recordData.page = data.data.page
    bettingForm.pageIndex++
  }).finally(() => {
    let time = setInterval(() => {
      ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'el-loading'
      }).close()
      loadingbetting.value = false
      clearInterval(time)
    }, 300)
  })
}
// 监听变化从新获取数据
watch([() => bettingForm.coinType, () => bettingForm.platformId, () => bettingForm.endDateTime, () => bettingForm.startDateTime], () => {
  bettingForm.pageIndex = 1
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  recordData.gameRecords = []
  initData()
})

onActivated(() => {
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  initData()
})


const options1 = [
  {
    value: 0,
    label: t("language.betting.all"),
  },
];
const options = [
  {
    value: 0,
    label: t("language.betting.all"),
  },
  {
    value: 1,
    label: "BRL",
  },
  {
    value: 2,
    label: "USDT",
  },
];

</script>
<style lang="scss">
.writebetting .el-select-dropdown__item {
  color: #b9bdc9 !important;
  background-color: transparent !important;
}

.writebetting .selected span {
  color: #fff !important;
  background-color: transparent !important;
}

.writebetting .hover {
  color: #fff !important;
}

.writebetting .is-focus {
  border-color: #0a906c !important;
}

.writebetting .el-input--suffix {
  border-color: #0a906c !important;
}

.writebetting .el-tooltip__trigger {
  border-color: #0a906c !important;
}

.writebetting .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}

.datetime .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}

.el-input__inner {
  color: #fff !important;
}

.el-input {
  border: none !important;
  box-shadow: none !important;
}

.el-picker-panel__body-wrapper,
.el-picker-panel,
.el-picker-panel__footer,
.el-date-picker,
.el-popper,
.el-time-panel,
.el-popper__arrow::before {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cancel {
  color: #fff !important;
}

.el-time-spinner__item.is-active {
  color: #fff !important;
}

.el-time-panel__btn.confirm {
  color: #0a906c !important;
}

.el-time-panel__footer {
  border-top: none !important;
}

.el-date-table th {
  border-bottom: solid 1px rgb(74, 76, 83) !important;
}

.el-button.is-text {
  color: #fff;
}

.el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}

.el-date-picker__time-header {
  border-bottom: 1px solid rgb(74, 76, 83) !important;
}

.today .el-date-table-cell__text {
  color: #0a906c !important;
  font-weight: normal !important;
  box-shadow: none !important;
  font-weight: bold !important;
}

.current .el-date-table-cell__text {
  color: #fff !important;
  background-color: #0a906c !important;
  font-weight: normal !important;
}

.next-month {
  background-color: rgb(61, 64, 72) !important;
  color: #fff !important;
}

.available {
  color: #fff !important;
}



/*
.custom-time .el-input__inner {
  color: #fff !important;
}
.custom-time .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}
.custom-time  .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}
.custom-time .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}*/
</style>
<style scoped lang="scss">
::v-deep .el-popper__arrow::before {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    width: 28px;
    line-height: 28px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.tran {
  background-color: #1a1a1a;
  padding: 45px 0px 20px;
  width: 100%;
  height: 100vh;
  background-color: rgb(26, 26, 26);
  @include flex(column, flex-start, center);

  >ul {
    width: 100%;
    padding: 20px;
    height: 146px;

    :deep(.el-select__wrapper) {
      background-color: rgb(39, 42, 48) !important;
      box-shadow: none;
      border: 1px solid #4a4c53;
    }

    :deep(.el-select__selected-item) {
      color: #fff !important;
    }

    :deep(.el-input__wrapper) {
      background-color: rgb(39, 42, 48) !important;
      box-shadow: none;
      border: 1px solid #4a4c53;
      height: 40px !important;
    }

    :deep(.el-picker-panel__body-wrapper) {
      background-color: rgb(39, 42, 48) !important;
      color: #fff;
    }

    :deep(.el-input__prefix) {
      color: #fff !important;
    }

    :deep(.el-input__wrapper) {
      color: #fff !important;
    }

    .datetime {
      background-color: 000 !important;
    }

    .write {
      background: rgb(39, 42, 48) !important;
      color: #fff;
    }

    li {
      @include flex(row, center, center);

      span {
        font-size: 16px;
        color: #fff;
        display: block;
        margin: 0 5px;
      }
    }

    li+li {
      margin-top: 20px;
    }

    li:nth-child(1) {
      @include flex(row, center, center);

      :deep(.el-select) {
        width: 140px;
      }

      span {
        display: block;
        width: 20px;
        text-align: center;
      }
    }

    li:nth-child(2) {
      span {
        display: block;
        width: 20px;
        text-align: center;
      }

      :deep(.el-date-editor) {
        width: 140px;
      }
    }
  }

  dl {
    overflow: auto;
    flex: 1;
    padding: 0 15px;
    width: 100%;
    margin-top: 20px;

    dd+dd {
      margin-top: 20px;
    }

    dd {
      background-color: rgb(36, 38, 43);
      border-radius: 10px;
      width: 100%;
      padding: 10px 0;



      .top {
        @include flex(row, space-between, center);
        width: 100%;
        padding: 10px 10px 15px;
        border-bottom: 1px solid rgba(74, 76, 83, 0.36470588235294116);

        div {
          @include flex(row, flex-start, center);

          img {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background: #133ea1;
            margin-right: 10px;
          }

          span {
            font-size: 18px;
            color: #fff;
          }
        }

        .red {
          font-size: 16px;
          color: #d6111a;
          font-weight: 600;
        }

        .green {
          font-size: 16px;
          color: #5bb92f;
          font-weight: 600;
        }


      }

      h3 {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-size: 16px;
        color: #fff;
      }



      ul {
        width: 100%;

        li:nth-child(1) {
          height: 52px;
          width: 100%;
          padding: 0 10px;
          background: #3b3e47;
          @include flex(row, space-between, center);

          span {
            color: #fff;
            font-size: 16px;
          }

          div {
            @include flex(row, flex-end, center);

            strong {
              color: #b5bac8;
              font-size: 16px;
              font-weight: normal;
              padding-right: 5px;
            }

            :deep(.van-button) {
              background-color: #0a906c;
              border-color: #0a906c;
              color: #fff;
              height: 32px;
              width: 56px;
              font-size: 12px;
            }
          }
        }

        li:nth-child(2) {
          @include flex(row, space-between, center);
          padding: 0 10px;
          p {
            color: #b5bac8;
            font-size: 16px;
          }

          div {
            @include flex(row, flex-start, center);
           
            height: 46px;
            span {
              font-size: 16px;
              color: #fff;
            }
            img{
              width: 26px;
              margin: 0 5px;
            }

            i {
              font-size: 16px;
              color: #b5bac8;
              font-weight: normal;
              font-style: normal;
            }
          }
        }
      }
    }

  }

  .footer {
    height: 400px;
    @include flex(column, center, center);

    img {
      width: 165px;
      margin: 0 auto;
    }

    p {
      font-size: 16px;
      color: #b5bacb;
      margin-top: 20px;
    }
  }
}
</style>
